<template>
  <div class="list-page-container">
    <div class="button-wrapper">
      <mu-button color="primary" @click="addNew()">
        <mu-icon value=":fa fa-plus"></mu-icon><span style="font-family: 微软雅黑;">&nbsp;新建</span>
      </mu-button>
      <mu-button color="primary" @click="copyAll()">
        <mu-icon value=":fa fa-clipboard"></mu-icon><span style="font-family: 微软雅黑;">&nbsp;复制所有</span>
      </mu-button>
      <mu-button color="primary" @click="deleteAll()">
        <mu-icon value=":fa fa-trash-o"></mu-icon><span style="font-family: 微软雅黑;">&nbsp;清除所有</span>
      </mu-button>
    </div>
    <mu-data-table :columns="columns" :data="list" style="margin-top: 10px;">
      <template slot-scope="scope">
        <td><span class="file-name">{{scope.row.fileName}}</span></td>
        <td>
          <mu-button icon color="blue" @click="doShowQRcode(scope.row.link)">
            <mu-icon value=":fa fa-qrcode" size="20"></mu-icon>
          </mu-button>
        </td>
        <td>
          <div class="button-group">
            <mu-button icon color="blue" class="clipboard-btn" v-bind:data-clipboard-text="scope.row.link">
              <mu-icon value=":fa fa-clipboard" size="20"></mu-icon>
            </mu-button>
            <mu-button icon color="red" @click="doDelete(scope.row.id)">
              <mu-icon value=":fa fa-trash-o" size="20"></mu-icon>
            </mu-button>
          </div>
        </td>
      </template>
    </mu-data-table>
    <mu-dialog width="250" :open.sync="showQRcode">
      <vue-qr v-bind:text="qrcodeText"></vue-qr>
    </mu-dialog>
    <mu-button id="messageButton" @click="showMessage()" style="display: none;"></mu-button>
  </div>
</template>

<script>
  import VueQr from 'vue-qr'
  import ClipboardJS from 'clipboard'
  import {PORT} from '../../main/webserver'
  
  let listPage = {
    name: 'file-share-list-page',
    data() {
      return {
        columns: [{
            title: '文件名',
            name: 'fileName',
            width: 700,
          },
          {
            // 加个空格缩进一下（强迫症）
            // \u2002 表示中文空格
            title: '\u2002'+'二维码',
            name: 'QRcode',
            width: 150,
            align: 'left',
            cellAlign: 'center'
          },
          {
            title: '操作',
            name: 'operation',
            width: 150,
            align: 'center',
            cellAlign: 'center'
          }
        ],
        list: [
        ],
        showQRcode: false,
        qrcodeText: ''
      };
    },
    methods: {
      getFileList(){
        let fileInfoList = this.$db.read().get('file_share').value();
        let list = [];
        let ip = this.$getIP();
        for(let i = 0; i < fileInfoList.length; ++i){
          list[i] = {
            fileName: fileInfoList[i].fileName,
            link: 'http://' + ip + ':' + PORT + '/file/' + fileInfoList[i].id,
            id: fileInfoList[i].id
          }
        }
        this.$data.list = list;
      },
      addNew(){
        this.$router.push('/add/file');
      },
      copyAll(){
        const { clipboard } = require('electron')
        let list = this.$data.list;
        let text = '';
        for(let i = 0; i < list.length; ++i){
          text += list[i].link + '\n';
        }
        clipboard.writeText(text);
        this.$toast.info("成功复制链接到剪切板");
      },
      deleteAll(){
        this.$db.read().get('file_share').remove(function(){return true}).write();
        this.getFileList();
      },
      doDelete(id){
        this.$db.read().get('file_share').remove(item=>item.id===id).write();
        this.getFileList();
      },
      doShowQRcode(text){
        this.$data.qrcodeText = text;
        this.$data.showQRcode = true;
      },
      showMessage(){
        this.$toast.info("成功复制链接到剪切板");
      }
    },
    components:{
      VueQr
    },
    created:function(){
      this.getFileList();
    },
    mounted:function(){
      // 去除表格横向的滚动条
      // 此操作可能有副作用
      document.querySelector(".mu-table-body-wrapper").style.overflowX='hidden';
    }
  }
  
  var clipboard_ = new ClipboardJS('.clipboard-btn');
  clipboard_.on('success', function() {
    document.querySelector('#messageButton').click();
  });
  
  export default listPage;
</script>

<style>
  .list-page-container{
    padding-top: 5px;
    padding-left: 0px;
    padding-right: 0px;
    margin: 5px;
  }
  .button-wrapper {
    padding-top: 20px;
  }

  .mu-button {
    margin: 18px;
  }
  
  .file-name{
    word-break:normal;
    -overflow:ellipsis;
    overflow:hidden;
  }
  
  .button-group{
    width: 100px;
    display: inline-block;
  }
</style>